<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>问卷调查</title>
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <div class="main">
        <div class="part part1">
            <h2>
                <span>*</span>
                1.敢问亲今年贵庚？
            </h2>
            <img src="images/icon1.png" alt="">
            <form id="age" action="">
                <div class="item">
                    <input type="radio" name="age" value="14岁以下" >
                    <div class="cont">14岁以下</div>
                </div>
                <div class="item">
                    <input type="radio" name="age" value="14-19岁" >
                    <div class="cont">14-19岁</div>
                </div>
                <div class="item">
                    <input type="radio" name="age" value="20-25岁" >
                    <div class="cont">20-25岁</div>
                </div>
                <div class="item">
                    <input type="radio" name="age" value="26-30岁" >
                    <div class="cont">26-30岁</div>
                </div>
                <div class="item">
                    <input type="radio" name="age" value="31-35岁" >
                    <div class="cont">31-35岁</div>
                </div>
                <div class="item">
                    <input type="radio" name="age" value="35岁以上" >
                    <div class="cont">35岁以上</div>
                </div>
            </form>
        </div>
        <div class="part part2">
            <h2>
                <span>*</span>
                2.亲的身份是？（保密程度100%）
            </h2>
            <img src="images/icon2.png" alt="">
            <form id="identity" action="">
                <div class="item">
                    <input type="radio" name="identity" value="学生党" >
                    <div class="cont">学生党</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="上班族" >
                    <div class="cont">上班族</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="管理层" >
                    <div class="cont">管理层</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="公务员" >
                    <div class="cont">公务员</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="企业主" >
                    <div class="cont">企业主</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="自由派" >
                    <div class="cont">自由派</div>
                </div>
                <div class="item">
                    <input type="radio" name="identity" value="待业中" >
                    <div class="cont">待业中</div>
                </div>
            </form>
        </div>
        <div class="part part3">
            <h2>
                <span>*</span>
                3.根据小黄人老师的不科学调查，想变指尖舞者的童鞋们内心OS多是：
            </h2>
            <img src="images/icon4.png" alt="">
            <form id="os" action="">
                <div class="item">
                    <input type="radio" name="os" value="从小就想学钢琴，一定要圆了我的梦" >
                    <div class="cont">从小就想学钢琴，一定要圆了我的梦</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="能弹钢琴是一件灰常牛逼的事情，我要在同事/盆友面前一鸣惊人！" >
                    <div class="cont">能弹钢琴是一件灰常牛逼的事情，我要在同事/盆友面前一鸣惊人！</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="生活/工作压力好大，弹钢琴能让我释放压力，放飞自我！" >
                    <div class="cont">生活/工作压力好大，弹钢琴能让我释放压力，放飞自我！</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="发展一门自己的兴趣爱好咯" >
                    <div class="cont">发展一门自己的兴趣爱好咯~</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="通过掌握钢琴这门艺术，增强自己的自信心，得到展示自己的舞台！" >
                    <div class="cont">通过掌握钢琴这门艺术，增强自己的自信心，得到展示自己的舞台！</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="学了钢琴变得美美/帅帅哒，又时尚又健康，还可以认识很多的好盆友！" >
                    <div class="cont">学了钢琴变得美美/帅帅哒，又时尚又健康，还可以认识很多的好盆友！</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="弹钢琴让我心情愉悦，又锻炼了左右大脑，一定可以长命百岁！" >
                    <div class="cont">弹钢琴让我心情愉悦，又锻炼了左右大脑，一定可以长命百岁！</div>
                </div>
                <div class="item">
                    <input type="radio" name="os" value="学会钢琴，不但增强了自己在异性面前的魅力，以后还可以自己教孩子！" >
                    <div class="cont">学会钢琴，不但增强了自己在异性面前的魅力，以后还可以自己教孩子！</div>
                </div>
            </form>
        </div>
        <div class="part part4">
            <h2>
                <span>*</span>
                4.小黄人老师手握N大秘籍，亲最想学哪个？
            </h2>
            <img src="images/icon3.png" alt="">
            <form id="target" action="">
                <div class="item">
                    <input type="radio" name="target" value="钢琴曲演奏" >
                    <div class="cont">钢琴曲演奏</div>
                </div>
                <div class="item">
                    <input type="radio" name="target" value="边弹边唱" >
                    <div class="cont">边弹边唱</div>
                </div>
                <div class="item">
                    <input type="radio" name="target" value="乐理知识掌握" >
                    <div class="cont">乐理知识掌握</div>
                </div>
                <div class="item">
                    <input type="radio" name="target" value="一听就会，即兴演奏" >
                    <div class="cont">一听就会，即兴演奏</div>
                </div>
            </form>
        </div>
        <div class="part part5">
            <h2>
                <span>*</span>
                5.小黄人老师在菲乐行走多年，一向低调神秘，亲是肿么找到组织滴？
            </h2>
            <form id="find" action="" style="overflow: hidden;">
                <h6>市场推广点</h6>
                <div class="item">
                    <span>推广员推广</span>
                    <span>派发菲乐宣传单页</span>
                </div>
                <h6>网络</h6>
                <div class="item">
                    <span>网络搜索</span>
                    <span>美团</span>
                    <span>大众点评</span>
                    <span>朋友圈</span>
                    <span>公众号</span>
                    <span>官网</span>
                </div>
                <h6>他人介绍</h6>
                <div class="item">
                    <span>菲乐员工介绍</span>
                    <span>朋友介绍</span>
                    <div class="student">
                        <p>菲乐在读学生介绍</p>
                        <input id="recommend" type="text" placeholder="请填写学员姓名">
                    </div>
                </div>
            </form>
        </div>
        <div class="part part6">
            <h2>
                <span>*</span>
                6.亲是从哪里毕业的咧？
            </h2>
            <img src="images/icon6.png" alt="">
            <form id="graduate" action="">
                <div class="item">
                    <input type="radio" name="graduate" value="小学/初中学校" >
                    <div class="cont">小学/初中学校</div>
                </div>
                <div class="item">
                    <input type="radio" name="graduate" value="高中/中专学校" >
                    <div class="cont">高中/中专学校</div>
                </div>
                <div class="item">
                    <input type="radio" name="graduate" value="大专院校" >
                    <div class="cont">大专院校</div>
                </div>
                <div class="item">
                    <input type="radio" name="graduate" value="大学本科" >
                    <div class="cont">大学本科</div>
                </div>
                <div class="item">
                    <input type="radio" name="graduate" value="硕士研究院" >
                    <div class="cont">硕士研究院</div>
                </div>
                <div class="item">
                    <input type="radio" name="graduate" value="博士基地" >
                    <div class="cont">博士基地</div>
                </div>
            </form>
        </div>
        <div class="part part7">
            <h2>
                <span>*</span>
                7.老师懂点点心理学，别紧脏，咱们来看看亲学钢琴的障碍是啥~
            </h2>
            <div class="partCont">
                <div class="contItem cont1">
                    <p>没时间</p>
                    <p>没时间</p>
                    <p>没时间</p>
                    <p>重要事情说三遍</p>
                </div>
                <div class="contItem cont2">
                    <p>万恶的五线谱啊！不认识不认识不认识！</p>
                </div>
                <div class="contItem cont3">
                    <p>麻麻说太贵了，不让我学~</p>
                </div>
                <div class="contItem cont4">
                    <p>左右手不停指挥呀，好怕左右互搏自己打到自己- -</p>
                </div>
            </div>
        </div>
        <div class="part7">
            <p>说了这么多小黄人老师表示我懂你！</p>
            <h4>0入场费</h4>
            <h4>0咨询费</h4>
            <h4>100%一对一服务</h4>
        </div>
        <div class="part8">
            <p>
                8.小黄人老师带着1000%的热情欢迎亲来学习钢琴~在手指跳舞之前，请亲严肃地回答我一个问题：除了我们，亲还有在其他机构了解过吗？（手动斜眼表示不会太吃醋）
            </p>
            <input id="other" type="text" placeholder="输入其他机构名称">
        </div>
        <div class="part9">
            <h4>想要马上加入？</h4>
            <h4>即刻领票入场！</h4>
            <input type="text" id="name" name="name" placeholder="姓名">
            <input type="text" id="phone" name="phone" placeholder="手机号码">
            <form action="" id="sex" style="overflow: hidden;">
                <div class="item">
                    <input type="radio" name="sex" value="男" >
                    <div class="cont">男</div>
                </div>
                <div class="item">
                    <input type="radio" name="sex" value="女" >
                    <div class="cont">女</div>
                </div>
            </form>
        </div>
        <div id="captcha" style="margin-top: 20px">
            <p id="wait" class="show">正在加载验证码...</p>
        </div>
        <button id="sendBtn">领免费菲乐入场券</button>
    </div>
    <script src="js/jquery.js"></script>
    <script type="text/javascript" src="https://static.geetest.com/static/tools/gt.js"></script>
    <script>
        var find = ""
        $("#find .item span").click(function () {
            var b = $("#find .item .spaned")
            if (b&&b.length>0){
                b.each(function(index,item){
                    $(item).removeClass("spaned");
                });
            }
            var a = $(this).css("color");
            if (a == 'rgb(34, 107, 150)') {
                $(this).addClass("spaned");
            } else {
                $(this).removeClass("spaned");
            }
            find = $("#find .item .spaned")[0].innerText;
        });

        $.ajax({
            url: '/front/member/geetestInit?t=' + (new Date()).getTime(), // 加随机数防止缓存
            type: "GET",
            dataType: 'json',
            success: function (data) {
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                    offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                    product: "popup", // 产品形式，包括：float，popup
                    width: "100%"
                }, handler);
            }
        });

        var handler = function (captchaObj) {
            captchaObj.appendTo('#captcha');
            captchaObj.onReady(function () {
                $("#wait").hide();
            });
            $('#sendBtn').click(function () {
                $("#sendBtn").val("注册中...");
                $("#sendBtn").attr("disabled", "disabled");
                var name = $("#name").val()
                var phone = $("#phone").val()
                var sex = $('input[name=sex]:checked', '#sex').val()

                var age = $('input[name=age]:checked', '#age').val()
                var identity = $('input[name=identity]:checked', '#identity').val()
                var os = $('input[name=os]:checked', '#os').val()
                var target = $('input[name=target]:checked', '#target').val()
                var other = $("#other").val() || ""
                var education = $('input[name=graduate]:checked', '#graduate').val()
                var tags = {
                    age:age,
                    targerClass:target,//目标课程
                    profession:identity, //职业身份
                    expect:os,//期待目标.课程需求
                    competitor:other//竞争对手,
                }

                if (name == "") {
                    alert("姓名不能为空");
                    $("#sendBtn").val("领免费菲乐入场券");
                    $("#sendBtn").removeAttr("disabled");
                    return;
                }

                if (sex == "") {
                    alert("性别不能为空");
                    $("#sendBtn").val("领免费菲乐入场券");
                    $("#sendBtn").removeAttr("disabled");
                    return;
                }

                if (phone == "") {
                    alert("电话不能为空");
                    $("#sendBtn").val("领免费菲乐入场券");
                    $("#sendBtn").removeAttr("disabled");
                    return;
                }

                if (!(age && identity && os && target && graduate &&find)) {
                    alert("亲,还有问题没有填~");
                    $("#sendBtn").val("领免费菲乐入场券");
                    $("#sendBtn").removeAttr("disabled");
                    return;
                }


                var result = captchaObj.getValidate();
                if (!result) {
                    alert("请完成验证");
                    $("#sendBtn").val("领免费菲乐入场券");
                    $("#sendBtn").removeAttr("disabled");
                    return;
                }
                $.ajax({
                    url: '/front/member/register?t=' + (new Date()).getTime(), // 加随机数防止缓存
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify({
                        userName: name,
                        phone: phone,
                        sex: sex,
                        tags: tags,
                        education:education,
                        channel:find,
                        challenge: result.geetest_challenge,
                        validate: result.geetest_validate,
                        seccode: result.geetest_seccode
                    }),
                    success: function (data) {
                        if (data.success == true) {
                            alert("领取成功");
                            // window.location.href = "/";
                            window.location.reload()
                        } else {
                            alert(data.message);
                            captchaObj.reset();
                            $("#sendBtn").val("领免费菲乐入场券");
                            $("#sendBtn").removeAttr("disabled");
                        }
                    },
                    error: function (XMLHttpRequest) {
                        alert('数据处理失败! 错误码:' + XMLHttpRequest.status + ' 错误信息:' + JSON.parse(
                            XMLHttpRequest.responseText).message);
                        $("#sendBtn").val("领免费菲乐入场券");
                        $("#sendBtn").removeAttr("disabled");
                    }
                });
            })
            window.gt = captchaObj;
        };
    </script>
</body>

</html>